<template>
    <div class="box">
        <div class="add" @click="goToAdd">
            发帖
        </div>
        <div class="top">
            <div>
                <svgIcon iconName="icon-tongxunlu" font-size="50px"></svgIcon>
            </div>
            <div>发现</div>
            <div class="top_btn" @click="scrollToTop">
                <svgIcon iconName="icon-dingbu" font-size="50px"></svgIcon>
            </div>
        </div>
        <div class="top_two">
            <div>
                <svgIcon iconName="icon-huizhang" font-size="70px"></svgIcon>
                <p>星座运势</p>
            </div>
            <div @click="router.push('/today')">
                <svgIcon iconName="icon-meiriqiandao" font-size="70px"></svgIcon>
                <p>每日一言</p>
            </div>
            <div>
                <svgIcon iconName="icon-shucaishuiguo" font-size="70px"></svgIcon>
                <p>流星许愿</p>
            </div>
            <div>
                <svgIcon iconName="icon-hongseqiandai" font-size="70px"></svgIcon>
                <p>外卖红包</p>
            </div>
        </div>
        <div class="top_three">
            <div :class="{ type_active: activeTab === 'hot' }" @click="switchTab('hot')">
                最热
            </div>
            <div :class="{ type_active: activeTab === 'new' }" @click="switchTab('new')">
                最新
            </div>
            <div :class="{ type_active: activeTab === 'follow' }" @click="switchTab('follow')">
                关注
            </div>
        </div>

        <div class="content" ref="contentRef">
            <div v-for="post in allPosts" :key="post.id" class="post-item" @click="goToReply(post)">
                <div class="post_user">
                    <img src="../assets/my/pic_mr.png" alt="用户头像">
                    <span>{{ post.user_name }}</span>
                </div>
                <div class="post-content">{{ post.content }}</div>
                <img v-if="post.image" :src="post.image" class="post-image" alt="帖子图片">
                <div class="post-footer">
                    <div class="post-time">{{ post.createTime }}</div>
                    <div class="post-actions">
                        <div class="like-btn" @click.stop="handleLike(post.id)">
                            <svgIcon :iconName="post.isLiked ? 'icon-dianzan' : 'icon-dianzan1'" font-size="40px"></svgIcon>
                            <span>{{ post.likes }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <TabBar></TabBar>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const posts = ref([]);
const activeTab = ref('new'); // 默认显示最新
const contentRef = ref(null); // 添加 content 的引用

// 导入图片
const banner = require('@/assets/my/banner.png');
const banner2 = require('@/assets/my/banner2.png');
const banner3 = require('@/assets/my/banner3.png');
const banner4 = require('@/assets/my/banner4.png');
const banner5 = require('@/assets/my/banner5.png');
const pic = require('@/assets/my/pic.png');

const posts_all = ref([
    {
        "comments": [],
        "content":"你好，我是一个大帅哥，爱人热心是",
        "createTime":"2025/05/28 12:07:44",
        "id": 1748419664368,
        "image": banner,
        "likes": 89,
        "isLiked": false,
        "user_name": "观万里",
    },
    {
        "comments": [],
        "content":"风路过窗边，捎来一封秋天的信。落叶是盖章，候鸟是邮差，而你是唯一的收件人。",
        "createTime":"2025/02/28 06:07:44",
        "id": 1748419664369,
        "image": "",
        "likes": 193,
        "isLiked": false,
        "user_name": "留山河",
    },
    {
        "comments": [],
        "content":"你会选一见钟情的惊喜，还是日久生情的安心？",
        "createTime":"2025/03/28 16:07:44",
        "id": 1748419664370,
        "image": banner2,
        "likes": 8,
        "isLiked": false,
        "user_name": "aebd",
    },
    {
        "comments": [],
        "content":"你好，我是一个大帅哥，爱人热心是",
        "createTime":"2025/05/18 14:37:44",
        "id": 1748419664371,
        "image": "",
        "likes": 16,
        "isLiked": false,
        "user_name": "观万里",
    },
    {
        "comments": [],
        "content":"月亮奔你而来，爱意藏进礼物里！中秋限定礼盒，把思念化作一口甜。",
        "createTime":"2025/05/28 22:03:24",
        "id": 1748419664372,
        "image": banner3,
        "likes": 7,
        "isLiked": false,
        "user_name": "我在恶化",
    },
    {
        "comments": [],
        "content":"为了寻找你，我搬进了鸟的眼睛，经常盯着路过的风",
        "createTime":"2025/05/28 16:07:44",
        "id": 1748419664373,
        "image": pic,
        "likes": 178,
        "isLiked": false,
        "user_name": "观万里",
    },
    {
        "comments": [],
        "content":"你好，我是一个大帅哥，爱人热心是",
        "createTime":"2025/01/28 16:07:44",
        "id": 1748419664374,
        "image": "",
        "likes": 8,
        "isLiked": false,
        "user_name": "JIE",
    },
    {
        "comments": [],
        "content":"少即是多，品质从不需要喧哗!",
        "createTime":"2024/09/28 16:07:44",
        "id": 1748419664375,
        "image": "",
        "likes": 59,
        "isLiked": false,
        "user_name": "车则",
    },
    {
        "comments": [],
        "content":"你追逐的光，终会照亮自己。",
        "createTime":"2025/03/08 11:07:44",
        "id": 1748419664376,
        "image": banner4,
        "likes": 32,
        "isLiked": false,
        "user_name": "观万里",
    },
    {
        "comments": [],
        "content":"专注每一处细节，让时间见证答案。",
        "createTime":"2022/01/01 16:07:44",
        "id": 1748419664377,
        "image": banner5,
        "likes": 56,
        "isLiked": false,
        "user_name": "日落大道",
    },
])

// 加载帖子
const loadPosts = () => {
    const storedPosts = JSON.parse(localStorage.getItem('posts') || '[]');
    // 确保从 localStorage 加载的帖子有唯一的 id
    posts.value = storedPosts.map((post, index) => ({
        ...post,
        id: Date.now() + index // 使用时间戳加索引确保唯一性
    }));
};

// 合并所有帖子数据并根据当前选中的标签进行排序
const allPosts = computed(() => {
    // 使用 Map 来确保 id 唯一性
    const postMap = new Map();
    
    // 先添加 posts_all 中的帖子
    posts_all.value.forEach(post => {
        postMap.set(post.id, post);
    });
    
    // 再添加 posts 中的帖子，如果 id 重复则使用新的 id
    posts.value.forEach(post => {
        if (postMap.has(post.id)) {
            post.id = Date.now() + Math.random(); // 生成新的唯一 id
        }
        postMap.set(post.id, post);
    });
    
    // 将 Map 转换回数组
    const combinedPosts = Array.from(postMap.values());
    
    // 根据当前选中的标签进行排序
    switch (activeTab.value) {
        case 'hot':
            return combinedPosts.sort((a, b) => b.likes - a.likes);
        case 'new':
            return combinedPosts.sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
        case 'follow':
            return combinedPosts;
        default:
            return combinedPosts;
    }
});

// 点赞功能
const handleLike = (postId) => {
    // 先检查 posts 中
    const postIndex = posts.value.findIndex(post => post.id === postId);
    if (postIndex !== -1) {
        const post = posts.value[postIndex];
        post.likes += post.isLiked ? -1 : 1;
        post.isLiked = !post.isLiked;
        // 更新localStorage
        localStorage.setItem('posts', JSON.stringify(posts.value));
        return;
    }
    
    // 再检查 posts_all 中
    const allPostIndex = posts_all.value.findIndex(post => post.id === postId);
    if (allPostIndex !== -1) {
        const post = posts_all.value[allPostIndex];
        post.likes += post.isLiked ? -1 : 1;
        post.isLiked = !post.isLiked;
    }
};

// 跳转到发帖页面
const goToAdd = () => {
    router.push('/find_add');
};

// 跳转到回复页面
const goToReply = (post) => {
    router.push({
        path: '/find_reply',
        query: {
            post: JSON.stringify(post)
        }
    });
};

// 回到顶部
const scrollToTop = () => {
    if (contentRef.value) {
        contentRef.value.scrollTo({
            top: 0,
            behavior: 'smooth' // 添加平滑滚动效果
        });
    }
};

// 切换标签
const switchTab = (tab) => {
    activeTab.value = tab;
    // 切换标签后滚动到顶部
    if (contentRef.value) {
        contentRef.value.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    }
};

onMounted(() => {
    loadPosts();
});
</script>
<style lang="less" scoped>
.box {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    .add {
        position: absolute;
        top: 1250px;
        right: 50px;
        z-index: 1000;
        width: 120px;
        height: 120px;
        background-color: #fb8fae;
        font-size: 38px;
        color: #fff;
        text-align: center;
        line-height: 120px;
        border-radius: 50%;
    }
    .top {
        width: 100%;
        height: 100px;
        background-color: #fb8fae;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        font-size: 32px;  
        justify-content: space-between;
        padding: 0 45px;
    }
    .top_two {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 60px;
        background-color: #fff;
        position: fixed;
        top: 100px;
        left: 0;
        z-index: 100;
        text-align: center;
        p {
            margin-top: 10px;
            font-size: 24px;
            color: #000;
        }
    }
    .top_three {
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        padding: 0 45px;
        background-color: #fff;
        position: fixed;
        top: 250px;
        left: 0;
        z-index: 100;
        text-align: center;
        font-size: 28px;
        div {
            height: 50px;
            line-height: 50px;
            color: gray;
            margin-right: 70px;
        }
        .type_active {
            color: #fb8fae;
            border-bottom: 5px solid #fb8fae;
        }
    }
    .content {
        margin-top: 340px;
        width: 100%;
        height: calc(100vh - 460px);
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
        
        .post-item {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            
            .post_user {
                width: 100%;
                height: 60px;
                line-height: 60px;
                display: flex;
                img {
                    display: block;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }
                span {
                    font-size: 24px;
                    display: block;
                    margin-left: 30px;
                }
            }
            .post-content {
                margin-top: 10px;
                font-size: 32px;
                line-height: 1.5;
                margin-bottom: 20px;
            }
            
            .post-image {
                width: 100%;
                max-height: 400px;
                object-fit: cover;
                border-radius: 8px;
                margin-bottom: 15px;
            }
            
            .post-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24px;
                color: #666;
                
                .post-actions {
                    display: flex;
                    align-items: center;
                    
                    .like-btn {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        cursor: pointer;
                        
                        span {
                            color: #666;
                        }
                    }
                }
            }
        }
    }
}
</style>